<template>
  <div>

    <p @click="$router.go(-1)" class="recommend_return">&lt;</p>


    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(image, index) in recommend_swiper.pics2" :key="index">
        <img v-lazy="image" />
      </van-swipe-item>
    </van-swipe>

    <div class="bargain_list_describe">
      <h5>{{recommend.characteristic}}</h5>
      <p>{{recommend.name}}</p>
      <p><span style="color:red;">{{"低价"+recommend.minPrice}}</span> <span
          style="color:#ccc;margin-left: 5vw;">{{"原价"+recommend.originalPrice}}</span> <span
          style="color:darkgrey;float:right;">{{"库存"+recommend.stores}}</span>
      </p>
    </div>

    <van-tabs v-model="active" class="mains">
      <van-tab title="商品详情">
        <div class="bargain_list_describe_content" v-html="recommend_swiper.content">
        </div>
      </van-tab>
      <van-tab title="商品评价">商品评价</van-tab>

    </van-tabs>


    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="$store.state.shoplist.length" @click="gotoshopcar" />
      <van-goods-action-button type="warning" text="加入购物车" @click="join" />
      <van-goods-action-button type="danger" text="立即购买" @click="buy " />
    </van-goods-action>
    <van-popup v-model="show" round position="bottom" :style="{ height: '60%' }" closeable>




      <van-card :price="recommend.minPrice" :desc="recommend.characteristic" :title="recommend.name"
        :thumb="recommend.pic">

        <template #footer>
          <van-stepper v-model="value" />
        </template>
      </van-card>


      <p class="size">{{recommend_size.name}}</p>
      <ul class="uu1">
        <li v-for="item in recommend_size.childsCurGoods" :key="item.id" @click="sizes(item.name,item.id)">
          {{item.name}}
        </li>
      </ul>

      <van-goods-action>
        <van-goods-action-button type="danger" text="加入购物车" v-if="isshow" @click="addshopcar" />
        <van-goods-action-button type="danger" text="立即购买" v-else @click="gotoshopcar_add" />
      </van-goods-action>
    </van-popup>



  </div>
</template>

<script>
  import headers from '../../components/headers.vue'
  import Vue from 'vue';
  import {
    Lazyload
  } from 'vant';
  import {
    Toast
  } from 'vant';

  Vue.use(Toast);

  Vue.use(Lazyload);
  export default {
    components: {
      headers
    },
    data() {
      return {
        recommend_id: '',
        recommend: [],
        recommend_swiper: [],
        show: false,
        isshow: true,
        active: '',
        value: 0,
        recommend_size: [],
        Size: '',
        Size_id: ''
      }
    },

    methods: {

      gotoshopcar() {
        this.$router.push(this.$path.SHOPCAR)
      },
      addshopcar() {
        if (this.Size == "") {
          Toast('请选择尺寸');
        } else {
          Toast.success('加入购物车成功');
          this.$store.commit('add', {
            img: this.recommend.pic,
            price: this.recommend.minPrice,
            desc: this.recommend.characteristic,
            title: this.recommend.name,
            size: this.Size,
            id: this.Size_id,
            num: this.value
          })

          this.Size = ''
          this.show = false
        }
      },

      gotoshopcar_add() {
        if (this.Size == "") {
          Toast('请选择尺寸');
        } else {
          Toast.success('加入购物车成功');
          this.$store.commit('add', {
            img: this.recommend.pic,
            price: this.recommend.minPrice,
            desc: this.recommend.characteristic,
            title: this.recommend.name,
            size: this.Size,
            id: this.Size_id,
            num: this.value,

          })
          this.Size = ''
          this.show = false
          this.gotoshopcar()
        }


      },
      join() {
        this.show = true
        this.isshow = true

      },
      buy() {
        this.show = true
        this.isshow = false
      },
      sizes(sz, id) {
        console.log(sz);
        this.Size = sz
        this.Size_id = id
      }
    },


    mounted() {
      this.recommend_id = this.$route.query.id;
      this.$API.shop_detail(this.recommend_id).then((res) => {
        // console.log(res);
        this.recommend_swiper = res.data.data
        this.recommend = res.data.data.basicInfo
        this.recommend_size = res.data.data.properties[0]
      }).catch((err) => {
        console.log(err);
      });
    },
  }
</script>

<style lang="scss">
  .uu1 {
    width: 100vw;
    height: auto;
    display: flex;
    flex-flow: wrap;
    justify-content: flex-start;
    align-items: center;

    li {
      font-size: 14px;
      padding: 1vw;
      margin: 1vw;
      border: 1px solid #ccc;
      border-radius: 20px;
      margin-top: 1vh;
      text-align: center;
      // width: 25vw;

      &:hover {
        border: 1px solid red;
      }
    }
  }

  .size {
    height: 4vh;
    line-height: 4vh;
    text-align: center;
    color: #ccc;
    font-size: 12px;
    border-bottom: 1px solid #ccc;
  }

  .mains ul li {
    height: 4vh;
    line-height: 4vh;
    padding-left: 5vw;
    padding-right: 5vw;
  }

  .recommend_return {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    text-align: center;
    line-height: 20px;
    background-color: #fff;
    border: 1px solid #ccc;
    z-index: 999;
    position: fixed;
    top: 1vh;
    left: 2vw;

  }

  .van-swipe {
    width: 100vw;
    height: 55vh;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .bargain_list_describe {
    padding: 0 5vw;

    h5 {
      margin-top: 2vh;
    }

    p {
      margin-top: 1vh;
      font-size: 12px;
      color: #ccc;

    }

  }

  .bargain_list_describe_content {

    margin-top: 2vh;
    width: 100vw;
    height: auto;

    img {
      width: 100% !important;
      height: 100% !important;
    }

  }
</style>